
<template>
  <div class="app-content">
    <div class="p-2">
      <el-row :gutter="20">
        <el-col :lg="24" :xs="24">
          <div v-show="showSearch" class="m-b-10">
            <el-card shadow="hover">
              <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80">
                <el-row :gutter="20">
                    
                  <el-col :span="6">
                      <el-form-item label="门派名称" prop="userName">
                        <el-input v-model="queryParams.sectName" placeholder="请输入门派名称" clearable @keyup.enter="handleQuery" />
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="门派封面图" prop="userName">
                        <el-input v-model="queryParams.sectUrl" placeholder="请输入门派封面图" clearable @keyup.enter="handleQuery" />
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="门派描述" prop="userName">
                        <el-input v-model="queryParams.sectDesc" placeholder="请输入门派描述" clearable @keyup.enter="handleQuery" />
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="创建时间" prop="userName">
                        <el-input v-model="queryParams.createTime" placeholder="请输入创建时间" clearable @keyup.enter="handleQuery" />
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="创建人" prop="userName">
                        <el-input v-model="queryParams.createBy" placeholder="请输入创建人" clearable @keyup.enter="handleQuery" />
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item label="更新时间" prop="userName">
                        <el-input v-model="queryParams.updateTime" placeholder="请输入更新时间" clearable @keyup.enter="handleQuery" />
                      </el-form-item>
                  </el-col>
                    <el-col :span="6">
                      <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                      </el-form-item>
                    </el-col>
                </el-row>
              </el-form>
            </el-card>
          </div>

          <el-card shadow="hover">
            <template #header>
              <el-row :gutter="10">
                <el-col :span="1.5">
                  <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
                </el-col>
                <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
              </el-row>
            </template>

            <el-table v-loading="loading" border :data="listData">
              <el-table-column type="selection" width="50" align="center" />
              <template v-for="(item, index) in columns">
                <el-table-column v-if="item.visible" :key="item.key" :label="item.label" align="center" :prop="item.key" >
                  <template v-slot="scope">
                    
                    <!-- 门派封面图 -->
                    <template v-if="item.key === 'sectUrl'">
                        <el-image :src="BASE_CONFIG.BASE_URL + scope.row[item.key]" preview-teleported :preview-src-list="[BASE_CONFIG.BASE_URL + scope.row[item.key]]" style="width: 60px;height: 60px"></el-image>
                    </template>
                  </template>
                </el-table-column>
              </template>

              <el-table-column label="操作" fixed="right" width="180" align="center">
                <template #default="scope">
                  <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
                  <el-popconfirm
                      class="box-item"
                      title="确认删除？"
                      placement="top"
                      @confirm="handleDel(scope.row)"
                  >
                    <template #reference>
                      <el-button link type="danger" icon="Delete">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>

            <pagination
                v-show="total > 0"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                :total="total"
                @pagination="getList"
            />
          </el-card>
        </el-col>
      </el-row>

      <formVue ref="formRef" @change="getList"></formVue>

    </div>
  </div>
</template>

<script setup>
    // 方法
    import { ref } from 'vue'
    import methods from '@/utils/methods.js';
    const instance = getCurrentInstance();
    const { proxy } = instance || {};
    const { face_type } = proxy.useDict("face_type")
    import BASE_CONFIG from '@/utils/const.js'
    
    // 接口
    import { listSect, delSect } from '@/api/jx3/sect.js'
    
    // 组件
    import formVue from './form.vue'
    const formRef = ref(null)
    
    // 列显隐信息
    const columns = ref([
      { key: 'sectName', label: '门派名称', visible: true, children: [] },
      { key: 'sectUrl', label: '门派封面图', visible: true, children: [] },
      { key: 'sectDesc', label: '门派描述', visible: true, children: [] },
      { key: 'createTime', label: '创建时间', visible: true, children: [] },
      { key: 'createBy', label: '创建人', visible: true, children: [] },
      { key: 'updateTime', label: '更新时间', visible: true, children: [] },
    ]);
    
    // 搜索参数
    const queryParams = ref({
      pageNum: 1,
      pageSize: 10,
      sectName: undefined, // 门派名称
      sectUrl: undefined, // 门派封面图
      sectDesc: undefined, // 门派描述
      createTime: undefined, // 创建时间
      createBy: undefined, // 创建人
      updateTime: undefined, // 更新时间
    })
    // 总条数
    const total = ref(0)
    // 是否显示搜索栏
    const showSearch = ref(true);
    // 数据是否加载中
    const loading = ref(true);
    // 表格数据
    const listData = ref([]);
    
    
    // 获取数据
    const getList = () => {
      loading.value = false
      let params = methods.deepClone(queryParams.value)
      listSect(params).then(res => {
        listData.value = res.rows
        total.value = res.total
      })
    }
    
    // 搜索
    const handleQuery = () => {
      getList()
    }
    
    // 重置
    const resetQuery = () => {
      for (let i in queryParams.value) {
        if (i !== 'pageNum' && i !== 'pageSize') {
          queryParams.value[i] = undefined
        }
      }
      handleQuery()
    }
    
    // 新增
    const handleAdd = () => {
      formRef.value.open()
    }
    
    // 编辑
    const handleEdit = (data) => {
      formRef.value.edit(data)
    }
    
    // 删除
    const handleDel = (row) => {
      delSect(row.id).then(res => {
        proxy.$modal.msgSuccess('删除成功');
        getList()
      })
    }
    
    getList()
</script>
    